<template>
  <div class="_wz_learning">
    <Row :gutter="10" style="height: 100%;">
      <Col span="8" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;" @mouseover.native="removeTime" @mouseleave.native="launchTiming">
          <p slot="title">驾乘人员</p>
          <p slot="extra"><span @click="$emit('details', '驾乘人员')" class="_wz_vehiclePortrait_details"><Icon type="ios-search" size="18" /></span></p>
          <div style="height: 100%;padding: 10px;">
            <Carousel v-model="students" class="_wz_students" :radius-dot="true" style="padding-right: 20px" v-if="userList.length > 0" @on-change="staffSwitch">
              <CarouselItem v-for="item,index in userList" :key="index">
                <div class="_wz_students_cent">
                  <div class="_wz_students_cent_t">
                    <viewer class="_wz_students_cent_img">
                      <img :src="!!item.avatar?apiUrl.imgUrl+item.avatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                    <div class="_wz_students_cent_name">
                      <div>{{!!item.name?item.name:'--'}}<span style="margin: 0 0 0 10px;color: #2d8cf0;">{{!!item.typeName?item.typeName:'--'}}</span></div>
                      <div>{{!!item.phone?item.phone:'--'}}</div>
                      <div>{{!!item.identifyNum?item.identifyNum:'--'}}</div>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                  <Row style="line-height: 34px;">
                    <Col span="12" class="_wz_students_content">
                      <div class="_wz_students_round"></div>
                      <div class="_wz_students_content_name">准驾车型</div>
                      <div class="_wz_students_content_value">{{!!item.driverClazz?item.driverClazz:'--'}}</div>
                    </Col>
                    <Col span="12" class="_wz_students_content">
                      <div class="_wz_students_round"></div>
                      <div class="_wz_students_content_name">出生年月</div>
                      <div class="_wz_students_content_value">{{!!item.personDate?item.personDate:'--'}}</div>
                    </Col>
                    <Col span="12" class="_wz_students_content">
                      <div class="_wz_students_round"></div>
                      <div class="_wz_students_content_name">文化程度</div>
                      <div class="_wz_students_content_value">{{!!item.personDate?item.personDate:'--'}}</div>
                    </Col>
                    <Col span="12" class="_wz_students_content">
                      <div class="_wz_students_round"></div>
                      <div class="_wz_students_content_name">所属区域</div>
                      <div class="_wz_students_content_value">河北省 邢台市 邢台县</div>
                    </Col>
                    <Col span="24" class="_wz_students_content">
                      <div class="_wz_students_round"></div>
                      <div class="_wz_students_content_name">运输企业</div>
                      <div class="_wz_students_content_value">{{!!item.deptName?item.deptName:'--'}}</div>
                    </Col>
                  </Row>
                </div>
              </CarouselItem>
            </Carousel>
            <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <img src="@/assets/error-page/emptyImage.svg" >
              <div style="">暂无数据</div>
            </div>
          </div>
        </Card>
      </Col>
<!--      @error="public.imgDispose"-->
      <Col span="8" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;" >
          <p slot="title">培训课件</p>
          <p slot="extra"><span @click="jumping" class="_wz_vehiclePortrait_details"><Icon type="ios-search" size="18" /></span></p>
          <div class="_wz_training" ref="wzTraining">
            <template v-if="coursewareList.length > 0">
              <template v-for="item,index in coursewareList">
                <div class="_wz_training_list" :class="{_wz_training_list_select:coursewareAction == index}" @click="coursewareClick(index)">
                  <div class="_wz_training_title">
                    <div style="overflow:hidden;text-overflow:ellipsis; white-space:nowrap"><span>{{item.materialTrainName}}</span></div>
                    <div>培训类型:{{ item.materialTrainTransportTypeName }}-{{ item.materialTrainDirectionName }}</div>
                    <div>培训进度:{{ !!item.trainCourseStudentPlanTaskProcess?item.trainCourseStudentPlanTaskProcess:0 }}/<span style="font-size: 14px;color: #2d8cf0;">{{ !!item.trainCourseStudentPlanTaskDuration?item.trainCourseStudentPlanTaskDuration:0 }}</span></div>
                  </div>
                  <div class="_wz_training_state">
                    <i class="fa" :class="item.materialTrainType == 1?'fa-file-movie-o':'fa-file-word-o'"></i>
                    <div>{{ (item.trainCourseStudentPlanTaskFinish == 0) ? "未开始" : (item.trainCourseStudentPlanTaskFinish == 1) ? "已完成" : "进行中"}}</div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
              </template>
            </template>
            <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <img src="@/assets/error-page/emptyImage.svg" >
              <div style="">暂无数据</div>
            </div>
          </div>
        </Card>
      </Col>
      <Col span="8" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;" @mouseover.native="removeTime" @mouseleave.native="launchTiming">
          <p slot="title">学习记录</p>
          <p slot="extra"><span @click="learnDetails" class="_wz_vehiclePortrait_details"><Icon type="ios-search" size="18" /></span></p>
          <div class="_wz_learning_record">
            <Row :gutter="10" v-if="learningList.length > 0">
              <template v-for="item,index in learningList">
                <Col span="12">
                  <div class="_wz_learning_recordList">
                    <viewer class="_wz_learning_recordList_img">
                      <img :src="!!item.imgUrl?apiUrl.imgUrl+item.imgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                    <div class="_wz_learning_recordList_name">
                      <div>{{item.createTime}}</div>
                      <div>{{item.positionDescription}}</div>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </Col>
              </template>
            </Row>
            <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <img src="@/assets/error-page/emptyImage.svg" >
              <div style="">暂无数据</div>
            </div>
          </div>
        </Card>
      </Col>

    </Row>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {Swiper, swiperSlide} from "vue-awesome-swiper";
export default {
  props: ['seeCarData'],//接收来自父组件的数据
  components: {
    Swiper,
    swiperSlide,
  },
  data() {
    return {
      students: 0,
      userList:[],//人员列表
      coursewareList:[],//培训课件
      learningList:[],//学习记录

      coursewareAction:-1,//课件选中状态
      coursewareTime:null,//课件定时
      trainingCoursewareTiming:null,//人员无学习课件的定时
      numberRequests:0,//请求次数

    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    //冀ET4026
    var that = this;
    if(!!that.seeCarData){
      if(!!that.seeCarData.carPlateNo &&  !!that.seeCarData.carPlateColor){
        that.vehicleLoad();
      }
    }
  },
  methods: {//执行的方法
    //车辆加载
    vehicleLoad(){
      var that = this;
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/driverList", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          that.userList = res.data.data;
          if(that.userList.length > 0){
            that.trainingCourseware(that.userList[0])
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //培训课件
    trainingCourseware(data){
      var that = this;
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/trainPlanTask", {driverUuid: data.uuid}).then(res => {
        if (!!res) {
          that.coursewareList = res.data.data;
          if(that.coursewareList.length > 0){
            that.coursewareTiming();//课件定时
          }else{
            that.trainingCoursewareTiming = setTimeout(function() {
              if(that.students + 1  <  that.userList.length){
                that.students = that.students+1;
              }else{
                that.students = 0;
              }
              that.trainingCourseware(that.userList[that.students])
            }, 3000);
          }

        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //学习记录
    learningRecord(data){
      var that = this;
      that.removeTime();
      that.numberRequests = that.numberRequests + 1;
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/trainRecordImg", {studentPlanTaskUuid: data.uuid}).then(res => {
        if (!!res) {
          that.numberRequests = that.numberRequests - 1;
          if(that.numberRequests == 0){
            that.learningList = res.data.data;
            that.launchTiming();
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //人员切换
    staffSwitch(data, value){
      this.removeTime();
      this.coursewareAction = -1;
      this.trainingCourseware(this.userList[value])
    },
    //课件点击
    coursewareClick(index){
      this.coursewareAction = index - 1;
      this.removeTime();
      this.coursewareTiming()//课件定时
    },

    //发起定时
    launchTiming(){
      var that = this;
      that.coursewareTime = setTimeout(function() {
        that.coursewareTiming()//课件定时
      }, 3000);
    },
    //课件定时
    coursewareTiming(){
      var that = this;
      if((that.coursewareAction + 1) == that.coursewareList.length){
        //重置 0 左侧人员列表切换 清除定时
        that.coursewareAction = -1;
        if((that.students + 1) == that.userList.length){
          that.students = 0
        }else{
          that.students = that.students + 1;
        }
        that.trainingCourseware(that.userList[that.students]);//请求课件
        //滚动条 清0
      }else{
        // +1
        that.coursewareAction = that.coursewareAction + 1;
        // if 滚动条
        that.$refs.wzTraining.scrollTop = that.coursewareAction * 115
        // 请求右侧学习记录
        that.learningRecord(that.coursewareList[that.coursewareAction]);
      }

    },
    jumping(){
      var that = this;
      var materialList = [];
      that.coursewareList.forEach(function (k, i) {
        let data = {};
        data.name = k.materialTrainName;//名称
        data.typeName = k.materialTrainDirectionName;//类型
        data.time = k.trainCoursePlanTaskDuration;//时长
        if (k.materialTrainType == 1) {//视频
          data.type = 1;
          data.videoSdUrl = k.materialTrainVideoSdUrl;//标清：SD
          if (!!k.materialTrainVideoHdUrl) {//高清：HD
            data.videoHdUrl = k.materialTrainVideoHdUrl;
          }
          if (!!k.materialTrainVideoFdUrl) {//超清：FD
            data.videoFdUrl = k.materialTrainVideoFdUrl;
          }
        } else {
          data.type = 2;
          data.htmlUrl = k.materialTrainHtmlUrl;//文件路径
          data.mp3Url = k.materialTrainMp3Url;//mp3路径
        }
        materialList.push(data);
      })

       this.$emit('details', '培训课件',materialList)
    },
    //清除课件定时
    removeTime(){
      clearInterval(this.coursewareTime);
      clearInterval(this.trainingCoursewareTiming);
    },
    //学习详情
    learnDetails(){
      var data = {driverIdentifyNum:this.userList[this.students].identifyNum,wzYearMonth:this.public.timeFormatting(new Date(), "yyyy-MM")};
      this.$emit('details', '学习记录',data)
    },

  },
  watch: {//监听
    seeCarData: {
      // hanlder这个函数名字固定
      handler: function (news, old) {
        this.vehicleLoad();
      },
      deep: true//对象内部的属性监听，也叫深度监听
    },
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_learning {
  width: 100%;
  height: 100%;
  padding: 0 0 10px;

  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }

  ._wz_students {
    height: 100%;
    width: 100%;
    .ivu-carousel-dots{
      bottom: -9px;
      li {
        button{
          width: 10px;
          height: 10px;
          background: #2d8cf0;
        }
      }
      .ivu-carousel-active{
        button{
          width: 16px;
          border-radius: 10px;
        }
      }
    }

    .ivu-carousel-list {
      height: 100%;

      .ivu-carousel-track {
        height: 100%;

        .ivu-carousel-item {
          height: 100% !important;

          ._wz_students_cent {
            height: 100%;

            ._wz_students_cent_t {
              border-bottom: 1px solid #e1e1e1;
              padding: 0 0 10px 0;
              ._wz_students_cent_img {
                width: 75px;
                height: 90px;
                float: left;
                background: #e1e1e1;
                border-radius: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                  display: block;
                  margin: auto;
                  max-width: 80%;
                  max-height: 80%;
                  min-width: 30%;
                  min-height: 30%;
                }
              }
              ._wz_students_cent_name{
                float: left;
                margin: 0 0 0 10px;
                line-height: 30px;
                div{

                }
              }

            }
            ._wz_students_content{
              ._wz_students_round{
                background: rgb(92, 93, 101);
                width: 10px;
                height: 10px;
                border-radius: 5px;
                float: left;
                margin: 12px 10px 12px 0px;
              }
              ._wz_students_content_name{
                width: 60px;
                float: left;
              }
              ._wz_students_content_value{
                float: left;
                padding: 0 0 0 10px;
                width: calc(100% - 10px - 10px - 60px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #2d8cf0;
              }
            }


          }
        }
      }
    }
  }
  ._wz_training{
    width: 100%;height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
    ._wz_training_list{
      border:1px solid #eeeeee;
      background: #f6f6f6;
      border-radius: 5px;
      padding: 10px;
      margin: 0 0 10px;
      height: 105px;
      ._wz_training_title{
        float: left;
        width: calc(100% - 100px);
        line-height: 28px;
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span{
          font-size: 16px;
        }
      }
      ._wz_training_state{
        border-left: 1px solid #eeeeee;
        height: 100%;
        float: left;
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        i{
          color: #2d8cf0;
          display: block;
          font-size:30px;
          line-height: 50px;
        }
        div{
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    ._wz_training_list_select{
      border:1px solid #2d8cf0;
      background: #f0f7ff;
      ._wz_training_title{
        span{
          color: #2d8cf0;
        }
      }
    }
  }
  ._wz_training::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  ._wz_learning_record{
    width: 100%;height: 100%;
    overflow: auto;
    ._wz_learning_recordList{
      margin: 0 0 10px 0;
      ._wz_learning_recordList_img{
        width: 75px;
        height: 90px;
        float: left;
        background: #e1e1e1;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          display: block;
          margin: auto;
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }
      ._wz_learning_recordList_name{
        float: left;
        padding: 0 0 0 10px;
        width: calc(100% - 75px);
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        div{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          white-space: inherit;
          overflow: hidden;
          color: #666;
        }
      }

    }
  }

  ._wz_learning_record::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>
